View GitHub Repository TalentCloud

Schedule Inspection
Subscribe
Passed
Push — dev ( c29924...147e91 )
by Yonathan
04:01 queued 11s
created

ProgressRing.render   A

↳ Parent: ProgressRing

Complexity

Conditions 2

Size

Total Lines 33
Code Lines 30

Duplication

Lines 0
Ratio 0 %

Importance

Changes 0
Metric Value
cc 2
eloc 30
dl 0
loc 33
rs 9.16
c 0
b 0
f 0
1 
import React from "react";
2 

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    3
                

                                    
                                                    
                
                
                
interface ProgressRingProps {

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    4
                

                                    
                                                    
                
                
                
  radius: number;

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    5
                

                                    
                                                    
                
                
                
  stroke: number;

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    6
                

                                    
                                                    
                
                
                
  progress: number;

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    7
                

                                    
                                                    
                
                
                
  strokeColor: string;

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    8
                

                                    
                                                    
                
                
                
  max: number;

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    9
                

                                    
                                                    
                
                
                
}

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    10
                

                                    
                                                    
                
                
                

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    11
                

                                    
                                                    
                
                
                
interface ProgressRingState {

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    12
                

                                    
                                                    
                
                
                
  normalizedRadius: number;

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    13
                

                                    
                                                    
                
                
                
  circumference: number;

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    14
                

                                    
                                                    
                
                
                
}

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    15
                

                                    
                                                    
                
                
                

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    16
                

                                    
                                                    
                
                
                
class ProgressRing extends React.Component<

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    17
                

                                    
                                                    
                
                
                
  ProgressRingProps,

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    18
                

                                    
                                                    
                
                
                
  ProgressRingState

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    19
                

                                    
                                                    
                
                
                
> {

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    20
                

                                    
                                                    
                
                
                
  public constructor(props: ProgressRingProps) {

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    21
                

                                    
                                                    
                
                
                
    super(props);

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    22
                

                                    
                                                    
                
                
                

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    23
                

                                    
                                                    
                
                
                
    const { radius, stroke } = this.props;

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    24
                

                                    
                                                    
                
                
                

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    25
                

                                    
                                                    
                
                
                
    this.state = {

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    26
                

                                    
                                                    
                
                
                
      normalizedRadius: radius - stroke * 2,

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    27
                

                                    
                                                    
                
                
                
      circumference: (radius - stroke * 2) * (2 * Math.PI),

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    28
                

                                    
                                                    
                
                
                
    };

            


            
                                                                                                            
                                                                
            
                                    
            
            

                
                    29
                

                                    
                                                    
                
                
                
  }

            


            
                                                                        
                            
            
                                    
            
            

                
                    30
                

                                    
                                                    
                
                
                

            


            
                                                                        
                            
            
                                    
            
            

                
                    31
                

                                    
                                                    
                
                
                
  public render(): React.ReactElement {

            


            
                                                                        
                            
            
                                    
            
            

                
                    32
                

                                    
                                                    
                
                
                
    const { radius, stroke, progress, strokeColor, max } = this.props;

            


            
                                                                        
                            
            
                                    
            
            

                
                    33
                

                                    
                                                    
                
                
                
    const { normalizedRadius, circumference } = this.state;

            


            
                                                                        
                            
            
                                    
            
            

                
                    34
                

                                    
                                                    
                
                
                

            


            
                                                                        
                            
            
                                    
            
            

                
                    35
                

                                    
                                                    
                
                
                
    let strokeDashoffset = circumference - (progress / max) * circumference;

            


            
                                                                        
                            
            
                                    
            
            

                
                    36
                

                                    
                                                    
                
                
                
    if (strokeDashoffset < 0) {

            


            
                                                                        
                            
            
                                    
            
            

                
                    37
                

                                    
                                                    
                
                
                
      strokeDashoffset = 0;

            


            
                                                                        
                            
            
                                    
            
            

                
                    38
                

                                    
                                                    
                
                
                
    }

            


            
                                                                        
                            
            
                                    
            
            

                
                    39
                

                                    
                                                    
                
                
                

            


            
                                                                        
                            
            
                                    
            
            

                
                    40
                

                                    
                                                    
                
                
                
    return (

            


            
                                                                        
                            
            
                                    
            
            

                
                    41
                

                                    
                                                    
                
                
                
      <svg height={radius * 2} width={radius * 2}>

            


            
                                                                        
                            
            
                                    
            
            

                
                    42
                

                                    
                                                    
                
                
                
        <circle

            


            
                                                                        
                            
            
                                    
            
            

                
                    43
                

                                    
                                                    
                
                
                
          stroke="grey"

            


            
                                                                        
                            
            
                                    
            
            

                
                    44
                

                                    
                                                    
                
                
                
          fill="transparent"

            


            
                                                                        
                            
            
                                    
            
            

                
                    45
                

                                    
                                                    
                
                
                
          strokeWidth={stroke}

            


            
                                                                        
                            
            
                                    
            
            

                
                    46
                

                                    
                                                    
                
                
                
          strokeDasharray={`${circumference} ${circumference}`}

            


            
                                                                        
                            
            
                                    
            
            

                
                    47
                

                                    
                                                    
                
                
                
          style={{ strokeDashoffset: 0 }}

            


            
                                                                        
                            
            
                                    
            
            

                
                    48
                

                                    
                                                    
                
                
                
          r={normalizedRadius}

            


            
                                                                        
                            
            
                                    
            
            

                
                    49
                

                                    
                                                    
                
                
                
          cx={radius}

            


            
                                                                        
                            
            
                                    
            
            

                
                    50
                

                                    
                                                    
                
                
                
          cy={radius}

            


            
                                                                        
                            
            
                                    
            
            

                
                    51
                

                                    
                                                    
                
                
                
        />

            


            
                                                                        
                            
            
                                    
            
            

                
                    52
                

                                    
                                                    
                
                
                
        <circle

            


            
                                                                        
                            
            
                                    
            
            

                
                    53
                

                                    
                                                    
                
                
                
          stroke={strokeColor}

            


            
                                                                        
                            
            
                                    
            
            

                
                    54
                

                                    
                                                    
                
                
                
          fill="transparent"

            


            
                                                                        
                            
            
                                    
            
            

                
                    55
                

                                    
                                                    
                
                
                
          strokeWidth={stroke}

            


            
                                                                        
                            
            
                                    
            
            

                
                    56
                

                                    
                                                    
                
                
                
          strokeDasharray={`${circumference} ${circumference}`}

            


            
                                                                        
                            
            
                                    
            
            

                
                    57
                

                                    
                                                    
                
                
                
          style={{ strokeDashoffset }}

            


            
                                                                        
                            
            
                                    
            
            

                
                    58
                

                                    
                                                    
                
                
                
          r={normalizedRadius}

            


            
                                                                        
                            
            
                                    
            
            

                
                    59
                

                                    
                                                    
                
                
                
          cx={radius}

            


            
                                                                        
                            
            
                                    
            
            

                
                    60
                

                                    
                                                    
                
                
                
          cy={radius}

            


            
                                                                        
                            
            
                                    
            
            

                
                    61
                

                                    
                                                    
                
                
                
        />

            


            
                                                                        
                            
            
                                    
            
            

                
                    62
                

                                    
                                                    
                
                
                
      </svg>

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    63
                

                                    
                                                    
                
                
                
    );

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    64
                

                                    
                                                    
                
                
                
  }

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    65
                

                                    
                                                    
                
                
                
}

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    66
                

                                    
                                                    
                
                
                

            


            
                                                                                                            
                                                                
            
                                    
            
            

                
                    67
                

                                    
                                                    
                
                
                
export default ProgressRing;

            


            
                                                        
            
                                    
            
            

                
                    68